import React, { useState } from "react";
import { NextPage } from "next";
import { PageApi } from "@/api/page";
import cls from "classnames";
import style from "./index.module.scss";
import { Comment } from "@/components/Comment";

interface IProps {
  page: IPage;
}
const Page: NextPage<IProps> = ({ page }) => {
  return (
    <div className="container">
      <div className={style.wrapper}>
        <div className={style.cover}>
          <img src={page?.cover} />
        </div>
        <div className={style.content}>
          <div
            className={"markdown"}
            dangerouslySetInnerHTML={{
              __html: page?.content,
            }}
          ></div>
        </div>
      </div>
      <Comment isInHostPage={true} hostId={page?.id} />
    </div>
  );
};

Page.getInitialProps = async (ctx) => {
  const { id } = ctx.query;
  const page = await PageApi.getPage(id);
  return { page };
};

export default Page;
